<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标坐标位置</title>
		<style type="text/css">
			div{
				width: 300px;
				height: 200px;
				background: yellow;
				margin-left: 140px;
			}
			span{
				margin-top: 30px;
				display: block;
				width: 300px;
				height: 70px;
				border: 1px solid black;
				margin-left: 140px;
			}
		</style>
		<script>
			window.onload=function(){
				var oDiv=document.getElementById("oDiv");
				var oSpan=document.getElementById("oSpan");
				oDiv.onmousemove=function(event){
					if(!event){
						event=window.event
					}
					oSpan.innerHTML="相对于浏览器的位置：x:"+event.clientX+",y:"+event.clientY
									+"<br/>相对于显示器的位置：x："+event.screenX+",y:"+event.screenY
									+"<br/>相对于div的位置：x："+event.offsetX+",y:"+event.offsetY;
				}
			}
		</script>
		
	</head>
	<body>
		<div id="oDiv"></div>
		<span id="oSpan"></span>
	</body>
</html>
